@extends('layouts/main')
@section('content')
    <style>
        .layui-body{overflow-x: scroll;}
        .error-tip{font-size: 16px;margin-top: 10px;margin-bottom: 10px;color:red;}
    </style>
    <div style="padding: 15px;">
            <input type="hidden" id="db_name_input" value="{{$db_name}}">
            <input type="hidden" id="table_name_input" value="{{$table_name}}">
            <input type="hidden" id="after_input" value="{{$after}}">

            <button class="layui-btn layui-btn-danger" type="button"  onclick="dropTable('{{$table_name}}', '{{$db_name}}')">删除表</button><br>
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    @if($tab=='record')
                        <li class="layui-this">浏览</li>
                    @else
                        <li><a href="/index/record?db_name={{$db_name}}&table_name={{$table_name}}">浏览</a></li>
                    @endif
                    @if($tab=='structure')
                        <li class="layui-this">结构</li>
                    @else
                        <li><a href="/index/structure?db_name={{$db_name}}&table_name={{$table_name}}">结构</a></li>
                    @endif
                    @if($tab=='operation')
                        <li>操作</li>
                    @else
                        <li><a href="/index/operation?db_name={{$db_name}}&table_name={{$table_name}}">操作</a></li>
                    @endif
                </ul>
                <div class="layui-tab-content">
                </div>
            </div>
            <div class="error-tip"></div>
            <form class="layui-form" action="">
                <span>数据库名称：{{$db_name}}</span><br>
                <span>表名称：{{$table_name}}</span><br>
                <span>正在进行的操作：添加一个字段于{{$after}}之后</span>
            <table class="layui-table">
                <colgroup>
                    <col width="150">
                    <col width="200">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>字段名称</th>
                    <th>类型</th>
                    <th>长度</th>
                    <th>不为空</th>
                    <th>默认值</th>
                    <th>注释</th>
                    <th>主键</th>
                    <th>自动递增</th>
                </tr>
                </thead>
                <tbody id="field-list">
                <tr>
                    <td>
                        <div class="layui-input-inline">
                            <input type="text" name="name" value="" required lay-verify="required" placeholder="字段名称" autocomplete="off" class="layui-input name">
                        </div>
                    </td>
                    <td>
                        <input type="hidden" id="data_type_input" value="">
                        <select name="type" lay-verify="" lay-search class="data-type type">
                            <option value="">请选择类型</option>
                        </select>
                    </td>
                    <td>
                        <div class="layui-input-inline">
                            <input type="text" name="column_length" value="" placeholder="长度" autocomplete="off" class="layui-input length">
                        </div>
                    </td>
                    <td>
                        <div class="layui-input-inline">
                            <input type="checkbox" name="is_not_null" class="is_not_null" title="不为空" lay-skin="primary">
                        </div>
                    </td>
                    <td>
                        <div class="layui-input-inline">
                            <select name="default" lay-verify="" lay-search class="default">
                                <option value="">Empty String</option>
                                <option value="null">null</option>
                                <option value="1">自定义</option>
                            </select>
                        </div>
                    </td>
                    <td>
                        <div class="layui-input-inline">
                            <input type="text" name="comment" value="" placeholder="注释" autocomplete="off" class="layui-input comment">
                        </div>
                    </td>
                    <td>
                        <div class="layui-input-inline">
                            <input type="checkbox" name="primary_key" class="primary_key" title="主键" lay-skin="primary">
                        </div>
                    </td>
                    <td>
                        <div class="layui-input-inline">
                            <input type="checkbox" name="is_auto_increment" class="is_auto_increment" title="自动递增" lay-skin="primary">
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
                <div style="margin-top: 20px;">
                    <button class="layui-btn submit-btn" type="button" lay-submit lay-filter="formDemo">提交</button>
                    <button type="button" class="layui-btn layui-btn-primary" onclick="javascript:history.go(-1);">返回</button>
                </div>
            </form>
            <div>
            </div>
        
    </div>
    <script type="text/javascript" src="/js/index/structure.js"></script>
    <script>
        layui.use('element', function(){
            var element = layui.element;
        });
        layui.use('form', function() {
            var form = layui.form;
            // form.render();
            // //监听提交
            form.on('submit(formDemo)', function(data){
                // console.log(data.field)
                data.field.db_name = $('#db_name_input').val();
                data.field.table_name = $('#table_name_input').val();
                data.field.after = $('#after_input').val();
                data.field._token = $('meta[name="csrf-token"]').attr('content');
                var res = sendAjaxRequest('POST', '/database/addField', data.field, false);
                if (res.status == 0) {
                    layer.msg('修改成功');
                    gotoPage('/index/structure?db_name='+data.field.db_name+'&table_name='+data.field.table_name);
                } else {
                    $('.error-tip').html(res.msg);
                }
            });
        });

        $(function () {
            var res = sendAjaxRequest('GET', '/database/getAllDataType', {}, false);
            if (res.status == 0) {
                var data_type = $('#data_type_input').val();
                var selected = '';
                for (var i=0; i<res.data.length; i++) {
                    selected = '';
                    if (data_type == res.data[i].DATA_TYPE) {
                        selected = 'selected';
                    }
                    $('.data-type').append('<option value="'+res.data[i].DATA_TYPE+'" '+selected+'>'+res.data[i].DATA_TYPE+'</option>')
                }

            }
        })

    </script>
@endsection